<html lang="zh" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org"
      layout:decorate="~{template/container}">
<!--/*@thymesVar id="deptList" type="java.util.List<site.zsxeee.work.spring.oa.database.entity.Dept>"*/-->
<main class="main-content col-lg-10 col-md-9 col-sm-12 p-0 offset-lg-2 offset-md-3" layout:fragment="content">
    <div th:replace="template/navbar"></div>
    <div th:replace="~{template/alert}"></div>
    <div class="main-content-container container-fluid px-4 mb-4">
        <!-- Page Header -->
        <div class="page-header row no-gutters py-4">
            <div class="col-12 col-sm-4 text-center text-sm-left mb-4 mb-sm-0">
                <span class="text-uppercase page-subtitle">控制面板</span>
                <h3 class="page-title">部门管理</h3>
            </div>
            <div class="offset-sm-4 col-4 d-flex col-12 col-sm-4 d-flex align-items-center" style="margin-left: auto">
                <button class="btn btn-accent" style="margin-left: auto" data-toggle="modal" data-target="#add-modal"><i class="fa fa-plus"></i> 新增部门</button>
                <div class="modal fade" id="add-modal" tabindex="-1" role="dialog" aria-labelledby="add-modal" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <form class="modal-content" method="post" action="/depts/add">
                            <div class="modal-header">
                                <h5 class="modal-title" id="exampleModalLabel">新增部门</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="name">名称</label>
                                    <input type="text" class="form-control" id="name" name="name" required>
                                </div>
                                <div class="form-group">
                                    <label for="comment">备注</label>
                                    <input type="text" class="form-control" id="comment" name="comment" required>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                                <input type="submit" class="btn btn-primary" value="新增">
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Page Header -->
        <!-- Transaction History Table -->
        <table class="transaction-history d-none">
            <thead>
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>备注</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="dept:${deptList}">
                <td th:text="${dept.id}"></td>
                <td th:text="${dept.name}"></td>
                <td th:text="${dept.comment}"></td>
                <td>
                    <div class="btn-group btn-group-sm" role="group" aria-label="Table row actions">
                        <button type="button" class="btn btn-white">
                            <i class="material-icons">&#xE254;</i>
                        </button>
                        <button type="button" class="btn btn-danger"  th:onclick="delDept([[${dept.id}]]);">
                            <i class="material-icons">&#xE872;</i>
                        </button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
        <!-- End Transaction History Table -->
    </div>
    <script>
        function delDept(id) {
            if (confirm("确认删除此部门？")) {
                window.open("/depts/del?id="+id, "_self")
            }
        }
    </script>
</main>
</html>